<template>
  <!-- <div> -->
  <van-search
    class="searchInpVal"
    v-model="value"
    shape="round"
    background="#84bf96"
    placeholder="请输入搜索关键词"
    @search="searchAction"
  >
  </van-search>
  <!-- <van-button type="default" class="btnSearch">默认按钮</van-button> -->
  <!-- </div> -->
</template>
<script>
import gcoord from 'gcoord'
import * as MapConfig from '../utils/mapConfig'
import * as SERVICE from '../utils/service'
export default {
  data() {
    return {
      value: '', //搜索的目标值
    }
  },
  methods: {
    searchAction() {
      console.log(this.value)
      console.log('搜索')
      //判断搜索值不为空
      if (this.value) {
        //执行查询，默认获取周围3km范围以内的所有服务点，作为临时图层在地图上显示
        //1-获取当前位置信息
        navigator.geolocation.getCurrentPosition((position) => {
          console.log(position)
          //记录坐标系信息-wgs84坐标系：//坐标转换：wgs84->BDJ09
          let coords = gcoord.transform(
            [position.coords.longitude, position.coords.latitude], // 经纬度坐标
            gcoord.WGS84, // 当前坐标系
            gcoord.BD09 // 目标坐标系
          )
          //发起请求
          //?=113.159774130917&lat=35.06731502773802
          MapConfig.addTempLayers(
            MapConfig.staticParam.olmap,
            coords[0],
            coords[1],
            this.value
          )
          console.log(coords)
        })
      }
    },
  },
}
</script>
<style lang="less" scoped>
.searchInpVal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  //搜索按钮样式
}
// .btnSearch {
//   position: absolute;
//   top: 0;
//   right: 0;
//   color: red;
//   background-color: aquamarine;
// }
</style>
